<template>
	<view class="container" style="position: relative;">
		<view class="postx" :style="scrollTop>0?'background:#FFF;':''">
			<view :style="'height:'+statusBarHeight+'px'"></view>
			<view class="flexJusp" style="font-size: 36rpx;font-weight: bold;text-align: center;padding:0 20rpx;"
				:style="'height:'+navigationBarHeight+'px;line-height:'+navigationBarHeight+'px'">
				<view></view>
				<view>我的</view>
				<view></view>
			</view>
		</view>
		<view style="width:750rpx ;height: 448rpx;background: linear-gradient(228deg,#CCEAFF,#F7F6FA);position: absolute;top: 0;left: 0;right: 0;z-index: 0;">

		</view>
		<view style="width: 750rpx;overflow: auto;z-index: 999;">
			<view :style="'height:'+statusBarHeight+'px'"></view>
			<view :style="'height:'+navigationBarHeight+'px'"></view>
			<view class="flexJusp" style="margin:18rpx 0 28rpx;position: relative;">
				<view class="flex" @click="personal">
					<image
              style="width: 128rpx;height: 128rpx;border: 6rpx solid #FFFFFF;border-radius:50%;margin-left:28rpx;"
              :src="detail.icon||this.$loadImage('logo')"></image>
					<view style="margin-left:20rpx;">
						<view style="font-size: 32rpx;font-weight: bold;padding:12rpx 0 24rpx;">{{detail.nickname||''}}
						</view>
						<view style="font-size: 26rpx;color: #333333;"><text v-if="!detail.phone">暂无绑定手机号</text><text v-else>绑定手机 {{detail.phone||'无'}}</text> </view>
					</view>
				</view>
				<image @click="notify" style="width:29rpx;height:35rpx;margin:42rpx 56rpx 0 0;" src="/static/image/01_fv.png"></image>
			</view>
			<view style="width: 694rpx;height: 130rpx;border-radius: 20rpx;margin: auto;position: relative;">
				<image style="width: 694rpx;height: 130rpx;position: absolute;top:0;left:0;z-index: 1;" :src="this.$loadImage('userWalletBackground')"></image>
				<view class="flexJusp" style="position: absolute;top:0;left:0;z-index: 2;width: 694rpx;">
					<view style="width: 288rpx;text-align: center;font-size: 32rpx;color: #FFFFFF;">
						<view style="padding-top:24rpx; color: #FFFFFF;">￥{{detail.money||0}}</view>
						<view style="font-size:24rpx;color: #FFFFFF;">账户余额</view>
					</view>
					<view class="buttons" style="margin:44rpx 34rpx 0 0;" @click="wallet">查看详情</view>
				</view>

			</view>
			<view class="flex"
				style="width: 694rpx;height: 152rpx;background: #FFFFFF;border-radius: 16rpx;margin:24rpx auto;">
				<view @click="master" class="flex"
					style="width: 318rpx;height: 112rpx;background: #F3F5F9;border-radius: 16rpx;margin:20rpx 18rpx 0 20rpx;">
					<image style="width:72rpx;height:72rpx;margin:20rpx 16rpx 20rpx 20rpx;"
						src="/static/image/05_1ghjg.png"></image>
					<view style="font-weight: bold;line-height:112rpx;">师傅管理</view>
				</view>
				<view class="flex" @click="gotoMt"
					style="width: 318rpx;height: 112rpx;background: #F3F5F9;border-radius: 16rpx;margin:20rpx 0 0 0;">
					<image style="width:72rpx;height:72rpx;margin:20rpx 16rpx 20rpx 20rpx;"
						src="/static/image/05_1yrth.png"></image>
					<view style="font-weight: bold;line-height:112rpx;">我要接单</view>
				</view>
			</view>
			<view style="font-size: 26rpx;margin:0 0 16rpx 28rpx;">更多服务</view>
			<view
				style="width: 694rpx;background: #FFFFFF;border-radius: 16rpx;margin: auto;font-size: 26rpx;line-height:44rpx;">
				<view @click="address" class="flexJusp" style="padding:32rpx 24rpx;border-bottom:2rpx solid #F4F3F5;">
					<view class="flex">
						<image style="width:44rpx;height:44rpx;" src="/static/image/05_q.png"></image>
						<view style="margin-left:16rpx;">我的地址</view>
					</view>
					<image style="width:16rpx;height:24rpx;margin:10rpx 0 0;" src="/static/image/mv_tuichus.png">
					</image>
				</view>
				<view @click="merchant" class="flexJusp" style="padding:32rpx 24rpx;border-bottom:2rpx solid #F4F3F5;">
					<view class="flex">
						<image style="width:44rpx;height:44rpx;" src="/static/image/05_f.png"></image>
						<view style="margin-left:16rpx;">服务站加盟</view>
					</view>
					<image style="width:16rpx;height:24rpx;margin:10rpx 0 0;" src="/static/image/mv_tuichus.png">
					</image>
				</view>
				<view @click="invite" class="flexJusp" style="padding:32rpx 24rpx;border-bottom:2rpx solid #F4F3F5;">
					<view class="flex">
						<image style="width:44rpx;height:44rpx;" src="/static/image/05_yc.png"></image>
						<view style="margin-left:16rpx;">邀请好友</view>
					</view>
					<image style="width:16rpx;height:24rpx;margin:10rpx 0 0;" src="/static/image/mv_tuichus.png">
					</image>
				</view>
				<view @click="customer" class="flexJusp" style="padding:32rpx 24rpx;border-bottom:2rpx solid #F4F3F5;">
					<view class="flex">
						<image style="width:44rpx;height:44rpx;" src="/static/image/08_xa.png"></image>
						<view style="margin-left:16rpx;">客服中心</view>
					</view>
					<image style="width:16rpx;height:24rpx;margin:10rpx 0 0;" src="/static/image/mv_tuichus.png">
					</image>
				</view>
				<view @click="feedback" class="flexJusp" style="padding:32rpx 24rpx;border-bottom:2rpx solid #F4F3F5;">
					<view class="flex">
						<image style="width:44rpx;height:44rpx;" src="/static/image/05_t.png"></image>
						<view style="margin-left:16rpx;">意见反馈</view>
					</view>
					<image style="width:16rpx;height:24rpx;margin:10rpx 0 0;" src="/static/image/mv_tuichus.png">
					</image>
				</view>
				<view class="flexJusp" style="padding:32rpx 24rpx;" @click="set">
					<view class="flex">
						<image style="width:44rpx;height:44rpx;" src="/static/image/05_y.png"></image>
						<view style="margin-left:16rpx;">设置中心</view>
					</view>
					<image style="width:16rpx;height:24rpx;margin:10rpx 0 0;" src="/static/image/mv_tuichus.png">
					</image>
				</view>
			</view>
		</view>
		<view style="height:env(safe-area-inset-bottom);"></view>
		<view class="tabbar">
			<view class="flexJusp">
				<view @click="index">
					<image style="width:44rpx;height:44rpx;" src="/static/image/icon_sy.png"></image>
					<view>首页</view>
				</view>
				<view @click="order">
					<image style="width:44rpx;height:44rpx;" src="/static/image/icon_dd.png"></image>
					<view>订单</view>
				</view>
				<view @click="placeorder" style="width:130rpx;"></view>
				<view @click="wallet">
					<image style="width:44rpx;height:44rpx;" src="/static/image/icon_qb.png"></image>
					<view>钱包</view>
				</view>
				<view style="color: #1176EF;">
					<image style="width:44rpx;height:44rpx;" src="/static/image/icon_wd_fill.png"></image>
					<view>我的</view>
				</view>
				<image @click="placeorder" style="width:130rpx;height:130rpx;position: absolute;left:312rpx;top:-44rpx;"
					:src="this.$loadImage('homeOrderTip')"></image>
				<view @click="placeorder"
					style="font-size: 22rpx;color: #FFFFFF;position: absolute;left:332rpx;top:26rpx;">立即下单</view>
			</view>
			<view style="height:env(safe-area-inset-bottom);"></view>
		</view>
		<uni-popup ref="popup" type="center">
			<view style="padding:30rpx;background: #FFFFFF;border-radius: 36rpx;">
				<view class="flexJusp" style="margin-bottom:24rpx;">
					<view style="font-size: 30rpx;font-weight: bold;color: #000000;">绑定师傅</view>
					<image @click="delects" style="width:36rpx;height:36rpx;" src="/static/image/03_4dfbd.png">
					</image>
				</view>
				<view style="padding:12rpx 0 40rpx;"><input style="font-size: 28rpx;" v-model="yaoma" placeholder="请输入师傅邀请码" /> </view>
				<view class="flexJusp">
					<view class="buttonxx" @click="delects">取消</view>
					<view class="buttonss" style="margin-left:20rpx;" @click="queding">绑定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import {systemInfo} from '@/https/mixin.js'

export default {
		mixins: [systemInfo],
		data() {
			return {
				scrollTop: 0,
				detail: {},
				yaoma:'',
        shifu_appId: '',
			}
		},
		onShow() {
			this.loads()
			this.getSystemInfo()
		},
		onPageScroll(event) {
			const scrollTop = event.scrollTop // 获取当前页面滚动高度
			this.scrollTop = event.scrollTop
		},
    onLoad(e) {
      uni.hideTabBar()
	  this.getAppIdByTag()
    },
		methods: {
			getAppIdByTag(){
				this.$httpapi('getAppByTag','POST',{tag:'wx_shifu'}).then(
				res=>{
					this.shifu_appId = res.appId
				})
			},
			notify() {
				uni.navigateTo({
					url: '/pages/index/Notify/Notify'
				})
			},
			queding(){
				this.$httpapi('bindguanxi', 'POST', {yaoma:this.yaoma}).then(res => {
					uni.showToast({
						title: res.msg,
						duration: 1500,
						icon:'none'
					});
					this.delects()
				})
			},
			gotoMt() {

        const shifuRuzhu = 'tuiwa://wx_shifu?{"page":"pages/login/MasterSettlement/MasterSettlement?type=zhuce"}'
				const login = 'tuiwa://wx_shifu?{"page":"pages/login/login"}'

        uni.showModal({
					title: '账号',
					content: '是否已有账号',
					confirmText: '注册',
					cancelText: '登录',
					success: (res) => {
						if (res.confirm) {
							this.$toLink(shifuRuzhu)
						} else if (res.cancel) {
							this.$toLink(login)
						}
					}
				});
			},
			loads() {
				this.$httpapi('selectuserinfo', 'POST', {}).then(res => {
					this.detail = res.data
				})
			},
			invite(){
				uni.navigateTo({
					url:'/pages_user/user/invite/invite?supId='+this.detail.openid
				})
				// this.$refs.popup.open('center')
			},
			popupx(index) {
				this.indexx = index
			},
			delects() {
				this.$refs.popup.close()
			},
			merchant() {
				uni.navigateTo({
					url: '/pages_user/user/MerchantSettlement/MerchantSettlement'
				})
			},
			feedback() {
				uni.navigateTo({
					url: '/pages_user/user/Feedback/Feedback'
				})
			},
			address() {
				uni.navigateTo({
					url: '/pages_user/user/address/address'
				})
			},
			set() {
				uni.navigateTo({
					url: '/pages_user/user/set/set'
				})
			},
			personal() {
				uni.navigateTo({
					url: '/pages_user/user/PersonalInformation/PersonalInformation'
				})
			},
			master() {
				uni.navigateTo({
					url: '/pages_user/user/MasterManagement/MasterManagement'
				})
			},
			customer() {
				uni.navigateTo({
					url: '/pages_user/user/customerService/customerService'
				})
			},
			index() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			order() {
				uni.switchTab({
					url: '/pages/myOrder/myOrder'
				})
			},
			wallet() {
				uni.switchTab({
					url: '/pages/wallet/wallet'
				})
			},
			placeorder() {
				uni.switchTab({
					url: '/pages/PlaceOrder/PlaceOrder'
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F6FA;
	}

	.container {
		padding-bottom: 150rpx;

		.postx {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99999999;
		}

		.buttons {
			text-align: center;
			width: 144rpx;
			height: 48rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			font-size: 22rpx;
			color: #384D8A;
			line-height: 48rpx;
		}

		.tabbar {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 9999;
			width: 650rpx;
			background-color: #FFF;
			color: #9EA3AE;
			font-size: 24rpx;
			padding: 6rpx 50rpx;
			line-height: 36rpx;
			box-shadow: 0px -4px 10px 0px rgba(0, 0, 0, 0.10);
			text-align: center;
		}
		.buttonss {
			text-align: center;
			width: 200rpx;
			height: 66rpx;
			background: linear-gradient(180deg, #2089FF 0%, #11ACEF 100%);
			border-radius: 44rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 66rpx;
		}

		.buttonxx {
			text-align: center;
			width: 200rpx;
			height: 66rpx;
			background: #FFFFFF;
			border-radius: 44rpx;
			border: 2rpx solid #2089FF;
			color: #2089FF;
			line-height: 66rpx;
		}
	}
</style>
